<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        账号与安全中心/<span style="color: #3894f8">身份验证</span>
      </div>
      <!-- 标题 -->
      <div class="title" v-if="verify == '1'">
        身份验证<span class="span_not">未验证</span>
      </div>
      <div class="title" v-if="verify == '2'">
        身份验证<span class="span_has">已验证</span>
      </div>
      <!-- 点击验证 -->
      <p v-if="verify == '1'" class="click-verify" @click="handelClick(2)">
        点击认证身份
      </p>
      <p v-if="verify == '2'" class="click-verifyOn">
        <span class="ipt">姓名：</span>
        <span>张三</span>
        <span class="ipt">身份证号：</span>
        <span>411303********1514</span>
        <span class="ipt-btn" @click="handelClick(4)">解绑</span>
        <span class="ipt">(解绑后7天不可进行绑定)</span>
      </p>
      <!-- 标题 -->
      <div class="title" v-if="bind == '1'">
        支付密码<span class="span_not">未开通</span>
      </div>
      <div class="title" v-if="bind == '2'">
        支付密码<span class="span_has">已开通</span>
        <span class="cipher" @click="handelClick(3)">忘记密码</span
        ><span class="cipher" @click="handelClick(3)">更换密码</span>
      </div>
      <!-- 点击验证 -->
      <p v-if="bind == '1'" class="click-verify" @click="handelClick(1)">
        点击开通支付密码
      </p>
      <p v-if="bind == '2'" class="click-radio">
        <el-radio v-model="radio" label="1">开启</el-radio>
        <el-radio v-model="radio" label="2">关闭</el-radio>
      </p>
      <p v-if="bind == '2'" class="Instructions">
        开启状态下，购买及充值需输入支付密码
      </p>
    </div>
    <LiberalDi
      :dialogLiberal="dialogLiberal"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></LiberalDi>
    <TheDi
      :dialogThe="dialogThe"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></TheDi>
    <SwitchDi
      :dialogSwitch="dialogSwitch"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></SwitchDi>
    <UntieDi
      :dialogUntie="dialogUntie"
      @handleClose="handleClose"
      @handleUnderstand="handleUnderstand"
    ></UntieDi>
  </div>
</template>

<script>
import LiberalDi from "./components/LiberalDi.vue";
import TheDi from "./components/TheDi.vue";
import SwitchDi from "./components/SwitchDi.vue";
import UntieDi from "./components/UntieDi.vue";
export default {
  data() {
    return {
      verify: "2", // 身份验证 1 未验证 2 已验证
      bind: "2", // 支付密码 1未开通 2 已开通
      radio: "1", // 单选
      dialogLiberal: false, // 开通支付密码弹窗
      dialogThe: false, // 认证身份
      dialogSwitch: false, // 忘记/更换密码
      dialogUntie: false, // 解绑
    };
  },
  components: { LiberalDi, TheDi, SwitchDi, UntieDi },
  methods: {
    // 1开通支付密码  2认证  3忘记密码/更换密码  4解绑
    handelClick(num) {
      if (num == 1) {
        this.dialogLiberal = true;
      } else if (num == 2) {
        this.dialogThe = true;
      } else if (num == 3) {
        this.dialogSwitch = true;
      } else if (num == 4) {
        this.dialogUntie = true;
      }
    },
    // 关闭弹窗 1开通支付密码  2认证  3忘记密码/更换密码  4解绑
    handleClose(val) {
      if (val == 1) {
        this.dialogLiberal = !this.dialogLiberal;
      } else if (val == 2) {
        this.dialogThe = !this.dialogThe;
      } else if (val == 3) {
        this.dialogSwitch = !this.dialogSwitch;
      } else if (val == 4) {
        this.dialogUntie = !this.dialogUntie;
      }
    },
    // 弹窗确认 1开通支付密码  2认证  3忘记密码/更换密码  4解绑
    handleUnderstand(val) {
      if (val == 1) {
        this.dialogLiberal = !this.dialogLiberal;
      } else if (val == 2) {
        this.dialogThe = !this.dialogThe;
      } else if (val == 3) {
        this.dialogSwitch = !this.dialogSwitch;
      } else if (val == 4) {
        this.dialogUntie = !this.dialogUntie;
      }
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
    // 标题
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      font-weight: 600;
      margin-top: 30px;
      display: flex;
      .span_not {
        font-size: 14px;
        color: #a4a4a4;
        margin-left: 10px;
      }
      .span_has {
        font-size: 14px;
        color: #bd3124;
        margin-left: 10px;
      }
      .cipher {
        color: #3291f8;
        font-size: 14px;
        text-decoration: underline;
        margin-left: 100px;
      }
      .cipher:nth-child(3) {
        margin-left: 20px;
      }
    }
    // 点击验证身份
    .click-verify {
      width: 82%;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      color: #a4a4a4;
      text-align: center;
      margin: auto;
      margin-top: 20px;
      border-radius: 10px;
      border: 2px dashed gray;
    }
    // 已验证/绑定
    .click-radio {
      height: 40px;
      line-height: 40px;
      margin-top: 20px;
      /deep/span {
        color: #101010 !important;
        font-size: 15px;
        font-weight: 400;
      }
    }
    .click-verifyOn {
      display: flex;
      font-size: 15px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-top: 20px;
      border-radius: 10px;
      .ipt-btn {
        color: #3291f8;
        font-size: 14px;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 40px;
        margin-right: 10px;
      }
      .ipt {
        color: #a4a4a4;
        font-weight: 600;
      }
      .ipt:nth-child(3) {
        margin-left: 40px;
      }
    }
    .Instructions {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: 600;
      margin-top: 10px;
      color: #a4a4a4;
    }
  }
}
</style>
